import { Image, Text, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import "./index.scss";

import DishItem from "./components/DishItem";
import { styled } from "@linaria/react";
import RatingStars from "@/components/RatingStars";
import { useState } from "react";
import RatingDialogue from "./components/RatingDialogue";
import { callContainerPost, useCallContainerGet } from "@/tools/useCallContainer";

import writeSVG from "@/assets/write.svg";

export default function Resturant() {
  const { params } = useRouter();
  const [{ restaurant }, __, updateRestaurantInfo] = useCallContainerGet(
    params.id && `/restaurants/${params.id}`
  );
  const [{ dishes }, _, updateDishesInfo] = useCallContainerGet(
    params.id && `/restaurants/${params.id}/dishes`
  );
  const [isRatingDialogueOpen, setIsRatingDialogueOpen] = useState(false);
  const { picture_url, name, score, numOfScore } = restaurant ?? {};

  const setRating = (rating: number) => {
    callContainerPost(`/restaurants/${params.id}/users/_open_id/score/${rating}`)
    .then(() => updateRestaurantInfo());
    setIsRatingDialogueOpen(false);
  };

  return (
    <ResturantView>
      {isRatingDialogueOpen && (
        <RatingDialogue
          setRating={(r) => setRating(r)}
          closeDialogue={() => setIsRatingDialogueOpen(false)}
        />
      )}
      <RestaurantPanel>
        {!restaurant ? (
          <Text>正在获取餐厅信息……</Text>
        ) : (
          <>
            <RestaurantImage mode="aspectFill" src={ picture_url } />
            <RestaurantDetail>
              <View>
                <RestaurantTitle>
                  { name }
                </RestaurantTitle>
                <RatingStars rating={ score } numOfScore={ numOfScore } />
              </View>
              <ReviewButton onClick={() =>setIsRatingDialogueOpen(true)}>
                <ReviewIcon src={writeSVG} mode="aspectFit" />
                <Text style={{ fontSize: '16px'}}>评价</Text>
              </ReviewButton>
            </RestaurantDetail>
            <DishItemList>
              {(dishes ?? []).map((dish) => (
                <View style={{marginTop:"12px", paddingLeft:"10px", border:"2px solid #dadada", borderRadius:"10px", boxShadow:"0 0 4px rgba(0,0,0,.35)"}}>
                  <DishItem dish={dish} updateInfo={updateDishesInfo} />
                </View>
              ))}
            </DishItemList>
          </>
        )}
      </RestaurantPanel>
      
    </ResturantView>
  );
}

const ResturantView = styled(View)`
  width: 100%;
  background-color: red;
`;

const RestaurantPanel = styled(View)`
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
`;

const RestaurantImage = styled(Image)`
  width: 100%;
  height: 250px;
  margin-bottom: -25px;
`;

const RestaurantDetail = styled(View)`
  padding: 20px;
  border-radius: 16px 16px 0 0;
  background: white;

  display: flex;
  justify-content: space-between;
`;

const RestaurantTitle = styled(Text)`
  font-size: 40px;
  font-weight: bold;
`;

const DishItemList = styled(View)`
  padding: 0 20px;
  display: flex;
  flex-direction: column;
`;

const ReviewButton = styled(View)`
  border-radius: 50px;
  width: 140px;
  height: 70px;

  border: 1px solid gray;

  display: flex;
  align-items: center;
  justify-content: center;
`

const ReviewIcon = styled(Image)`
  width: 30px;
  height: 30px;
`